<template>
  <el-table v-loading="loading" :data="shipmentList" @selection-change="handleSelectionChange"
    @sort-change="handleSortChange">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column type="index" label="序号" width="60" align="center" />
    <el-table-column label="运单编号" align="left" prop="billNo" width="140" :show-overflow-tooltip="true"
      sortable="custom" />
    <el-table-column label="发货方" align="left" prop="senderName" width="120" :show-overflow-tooltip="true" />
    <el-table-column label="发货地址" align="left" prop="addressA" width="180" :show-overflow-tooltip="true" />
    <el-table-column label="收货方" align="left" prop="receiverName" width="120" :show-overflow-tooltip="true" />
    <el-table-column label="收货地址" align="left" prop="addressB" width="180" :show-overflow-tooltip="true" />
    <el-table-column label="运单状态" align="center" prop="billStatus" width="100" sortable="custom">
      <template slot-scope="scope">
        <dict-tag v-if="dict.type.bill_status && dict.type.bill_status.length > 0" :options="dict.type.bill_status"
          :value="scope.row.billStatus" />
        <el-tag v-else :type="getStatusTagType(scope.row.billStatus)">{{ getStatusText(scope.row.billStatus) }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="货物名称" align="left" prop="goodsName" width="120" :show-overflow-tooltip="true"
      sortable="custom" />
    <el-table-column label="货物重量(kg)" align="center" prop="goodsWeight" width="100" />
    <el-table-column label="运输方式" align="center" prop="transportType" width="100" sortable="custom">
      <template slot-scope="scope">
        <dict-tag v-if="dict.type.transport_type && dict.type.transport_type.length > 0"
          :options="dict.type.transport_type" :value="scope.row.transportType" />
        <el-tag v-else :type="getTransportTypeTagType(scope.row.transportType)">{{
          getTransportTypeText(scope.row.transportType) }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="预计发货时间" align="center" prop="sendTime" width="120">
      <template slot-scope="scope">
        <span>{{ parseTime(scope.row.sendTime, '{y}-{m}-{d}') }}</span>
      </template>
    </el-table-column>
    <el-table-column label="预计到达时间" align="center" prop="arriveTime" width="120">
      <template slot-scope="scope">
        <span>{{ parseTime(scope.row.arriveTime, '{y}-{m}-{d}') }}</span>
      </template>
    </el-table-column>
    <el-table-column label="创建时间" align="center" prop="createTime" width="120" sortable="custom">
      <template slot-scope="scope">
        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="180" fixed="right" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)"
          v-hasPermi="['logistics:shipment:query']">详情</el-button>
        <!-- 删除按钮：运单状态为待发货时显示 -->
        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
          v-if="scope.row.billStatus === '待发货' || scope.row.billStatus === '1'"
          v-hasPermi="['system:bill:remove']">删除</el-button>
        <!-- 绑定按钮：运单状态为待发货且未绑定定位器时显示 -->
        <el-button size="mini" type="text" icon="el-icon-link" @click="handleBindLocator(scope.row)"
          v-if="scope.row.billStatus === '待发货' && (!scope.row.locatorId || scope.row.locatorId === 0 || scope.row.locatorId === '0')"
          v-hasPermi="['system:bill:edit']">绑定</el-button>
        <!-- 解绑按钮：运单状态为已送达且已绑定定位器时显示 -->
        <el-button size="mini" type="text" icon="el-icon-remove" @click="handleUnbindLocator(scope.row)"
          v-if="scope.row.billStatus === '已送达' && scope.row.locatorId && scope.row.locatorId !== 0 && scope.row.locatorId !== '0'"
          v-hasPermi="['system:bill:edit']">解绑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'ShipmentTable',
  dicts: ['bill_status', 'transport_type'],
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    shipmentList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    /** 多选框选中数据 */
    handleSelectionChange (selection) {
      this.$emit('selection-change', selection)
    },
    /** 详情按钮操作 */
    handleDetail (row) {
      this.$emit('detail', row)
    },
    /** 绑定定位器按钮操作 */
    handleBindLocator (row) {
      this.$emit('bind-locator', row)
    },
    /** 解绑定位器按钮操作 */
    handleUnbindLocator (row) {
      this.$emit('unbind-locator', row)
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      this.$emit('delete', row)
    },
    /** 排序变化处理 */
    handleSortChange (sortInfo) {
      console.log('排序变化:', sortInfo)
      this.$emit('sort-change', sortInfo)
    },
    /** 获取状态文本 */
    getStatusText (status) {
      const statusMap = {
        '1': '待发货',
        '2': '运输中',
        '3': '已签收',
        '4': '已取消'
      }
      return statusMap[status] || status
    },
    /** 获取状态标签类型 */
    getStatusTagType (status) {
      const typeMap = {
        '1': 'primary',
        '2': 'warning',
        '3': 'success',
        '4': 'danger'
      }
      return typeMap[status] || 'info'
    },
    /** 获取运输方式文本 */
    getTransportTypeText (type) {
      const typeMap = {
        '1': '公路运输',
        '2': '铁路运输',
        '3': '航空运输',
        '4': '水路运输'
      }
      return typeMap[type] || type
    },
    /** 获取运输方式标签类型 */
    getTransportTypeTagType (type) {
      const typeMap = {
        '1': 'primary',
        '2': 'warning',
        '3': 'success',
        '4': 'info'
      }
      return typeMap[type] || 'info'
    }
  }
}
</script>
